<template>
  <div class="table-tooltip">
    <div class="tooltip-left">
      <a-space :size="10">
        <slot name="left"></slot>
      </a-space>
    </div>

    <div class="tooltip-right">
      <a-space :size="10">
        <a-tooltip v-if="showSearch !== undefined" placement="top">
          <template #title>
            <span>{{ showSearch ? "隐藏搜索" : "显示搜索" }}</span>
          </template>
          <a-button shape="circle" @click="toggleSearch">
            <template #icon><SearchOutlined /></template>
          </a-button>
        </a-tooltip>

        <a-tooltip placement="top">
          <template #title>
            <span>刷新</span>
          </template>
          <a-button shape="circle" @click="handleRefresh">
            <template #icon><ReloadOutlined /></template>
          </a-button>
        </a-tooltip>

        <a-tooltip v-if="columns.length > 0" placement="top">
          <template #title>
            <span>显示/隐藏列</span>
          </template>
          <a-button shape="circle" @click="transferVisible = !transferVisible">
            <template #icon><TableOutlined /></template>
          </a-button>
        </a-tooltip>
      </a-space>
    </div>

    <a-modal v-model:visible="transferVisible" :footer="null" :width="450" title="显示/隐藏列">
      <a-transfer
        :titles="['显示字段', '隐藏字段']"
        :data-source="columnList"
        :render="item => item.title"
        :target-keys="transferTargetKeys"
        @change="handleTransferChange"
      />
    </a-modal>
  </div>
</template>

<script name="TableToolbar" lang="ts" setup>
import type { PropType } from "vue";
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: undefined
  },
  columns: {
    type: Array as PropType<TableColumn[]>,
    default: () => []
  }
});
const emit = defineEmits(["reload", "update:columns", "update:showSearch"]);

const columnList = ref<TableColumn[]>([]);
const columnVisibleList = ref<TableColumn[]>([]);
const transferVisible = ref<boolean>(false);
const transferTargetKeys = ref<string[]>([]);

props.columns.forEach(item => {
  item.visible = item.visible == undefined ? true : item.visible;
  columnList.value.push(item);

  if (!item.visible) {
    transferTargetKeys.value.push(item.key);
  } else {
    columnVisibleList.value.push(item);
  }
});

//穿梭更改
const handleTransferChange = (nextTargetKeys: string[]) => {
  transferTargetKeys.value = nextTargetKeys;

  columnVisibleList.value = [];

  columnList.value.forEach(item => {
    if (transferTargetKeys.value.includes(item.key)) {
      item.visible = false;
    } else {
      item.visible = true;
      columnVisibleList.value.push(item);
    }
  });

  emit("update:columns", columnVisibleList.value);
};

//显示隐藏
const toggleSearch = () => {
  emit("update:showSearch", !props.showSearch);
};

// 刷新
const handleRefresh = () => {
  emit("reload");
};

onMounted(() => {
  emit("update:columns", columnVisibleList.value);
});
</script>
<style lang="less" scoped>
.table-tooltip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  margin-bottom: 5px;
}
</style>
